<template>
  <div>
    <ye-tou></ye-tou>
    <dao-hang></dao-hang>
    
    <el-row class="order" type="flex" justify="space-around" :gutter="20">
      <el-col :span="12">
         <h2 style="text-align: left; margin-left: 50px;">订单详情</h2>
       <el-row>
         <el-col :span="8" >
           <div class="tab left">入住人</div>
            <div class="tab left">酒店名</div>
           <div class="tab left">订单号</div>
           <div class="tab left">身份证号码</div>
           <div class="tab left">手机号码</div>
           <div class="tab left">房型</div>
           <div class="tab left">入住日期</div>
           <div class="tab left">房间价格</div>
           <div class="tab left">订单价格</div>
         </el-col>
         <el-col :span="16">
          <div class="tab">{{uname}}</div>
          <div class="tab">{{hname}}</div>
          <div class="tab">{{oid}}</div>
          <div class="tab">{{idc}}</div>
          <div class="tab">{{phone}}</div>
          <div class="tab">{{type}}</div>
          <div class="tab">{{date}}至{{date1}}</div>
          <div class="tab">￥{{price}}</div>
          <div class="tab">￥{{pricecount}}</div>
         </el-col>
       </el-row>
      </el-col>
      <el-col :span="12">
        <div class="right"> <img :src="`/img/room/${pic}`" alt="" style="width:100%;height:100%" /></div>
        <h3 style="text-align: left;margin-left:50px">{{type}}</h3>
        <div style="text-align: left;margin-left:50px">纵享·云端度假套餐：</div>
        <p class="right">
         {{detail}}
        </p>
      </el-col>
    </el-row>
    <yewei></yewei>

  </div>
</template>
<script>
import DaoHang from "../components/DaoHang.vue";
import YeTou from "../components/YeTou.vue";
import Yewei from "../components/Yewei.vue";
export default {
  components: { DaoHang,YeTou, Yewei },
  data() {
    return {
      pricecount:'',
      uname: "",
      hname:"",
      local:"",
      oid:"",
      idc:"",
      phone:"",
      type:"",
      price:"",
      detail:"",
      pic:"",
      date:"",
      date1:""
    }
  },
  methods:{
     rtime(timedate){
      var json_date=new Date(timedate).toJSON();
      return new Date(+new Date(json_date)+8*3600*100).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');
    },
  },
  mounted(){
   
    console.log(this.$route.query.orderNum);
        this.$axios.get(`/ordering/${this.$route.query.orderNum}`).then(res=>{
        let result=res.data.data[0];
        this.uname=result.oname;
        this.phone=result.ophone;
        this.oid=result.order_num;
        this.idc=result.oidentity;
        this.hname=result.hotelname;
        this.pic=result.rpic
        this.type=result.type;
        this.price=result.rprice;
        this.detail=result.rdetail;
        this.date=this.rtime(result.checkin);
        this.date1=this.rtime(result.checkout);
        this.pricecount=result.price
      console.log(res.data.data);
    })
  }
};
</script>
<style scoped lang="scss">
.right{
   margin-right: 50px;
   margin-left: 50px;
}
.left{
  margin-left: 50px;
  padding-right: 20px;
}
.tab{
  
  // margin-left: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgb(193, 193, 193);
  height: 40px;

}

.order {
  margin-right: 10%;
  margin-left: 10%;
}
.user {
  padding-bottom: 20px;
  padding-top: 20px;
  margin-right: 30px;
  text-align: right;
}

.wh-quick-menu {
  position: relative;
  font-size: 16px;
  color: #999;
  background-color: #fff;
  height: 45px;
  text-align: right;
}

.wh-head {
  display: inline-block;
  line-height: 45px;
}

/* 所有span标签呈行内块元素显示 */
.wh-nav-item {
  margin-left: 12px;
  display: inline-block;
}

/* 去除a标签或者router-link的下划线 */
a {
  text-decoration: none;
}

/* 页头文字的左外边距 */
i[data-v-1e8333ae] {
  margin-right: 7px;
}

/* logo图标的大小 */
img {
  width: 120px;
  height: 30px;
  margin-top: 10px;
}
a > i:hover {
  color: red;
}
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #f5f5f5;
}
.bg-purple {
  background: #d3dce6;
  margin-right: 15%;
  margin-left: 15%;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>